<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: black;
        }
        .views{
            width: 250px;
            height: 250px;
            /* border: 1px solid; */
            margin: 350px auto;
            /* 相对定位 */
            position: relative;
            /* 设置透视效果，近大远小 */
            perspective: 1000px;
        }

        /* 主要的面 */
        .box{
            width: 100%;
            height: 100%;
            /* 绝对定位 */
            position: absolute;
            /* 设置3D元素效果 ,指定某元素的子元素是否位于三维空间内*/
            transform-style: preserve-3d;
            /* 设置看到不同面的效果 */
            transform: rotateX(-15deg) rotateY(20deg);
            transition: all ease-in-out .3s;
        }

        /* 经过时旋转 */
        @keyframes box{
            0%{
                transform: rotateX(0) rotateY(0);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        .box:hover{
            /* 自定义动画名称 */
            animation-name: box;
            /* 动画过渡类型 linear均速 */
            transition-timing-function: linear;
            /* 设置动画的播放次数 infinite循环，1代表播放次数 以此类推 */
            animation-iteration-count: infinite;
            /* 动画的属性 all代表所有属性 */
            transition-property: all;
            /* 动画持续时间 */
            animation-duration: 4.5s;
        }

        /* 立方体阴影效果 */
        .box:hover .face{
            box-shadow: 1px 1px 150px #e2d6dc;
        }

        /* 设置六个面大小 */
        .face{
            width: 100%;
            height: 100%;
            /* border: 1px solid; */
            /* 绝对定位 */
            position: absolute;
            text-align: center;
            line-height: 250px;
            font-size: 20px;
            transition: all ease-in-out .3s;
        }
        /* 设置六个面的位置 */
        .front{
            transform: translate3d(0,0,125px);
        }
        .back{
            transform: rotateY(180deg) translate3d(0,0,125px);
        }
        .left{
            transform: rotateY(-90deg) translate3d(0,0,125px);
        }
        .right{
            transform: rotateY(90deg) translate3d(0,0,125px);
        }
        .top{
            transform: rotateX(90deg) translate3d(0,0,125px);
        }
        .bottom{
            transform: rotateX(-90deg) translate3d(0,0,125px);
        }

        /* 六个面阴影效果 */
        .box div:nth-child(1){
            background-image: linear-gradient(25deg, #153f6b, #24687d, #29938f, #22c0a1)
        }
        .box div:nth-child(2){
            background-image: linear-gradient(25deg, #6f6fd9, #6993ce, #57b5c2, #23d7b4)
        }
        .box div:nth-child(3){
            background-image: linear-gradient(25deg, #3a274d, #6d4865, #a26c7e, #d99398)
        }
        .box div:nth-child(4){
            background-image: linear-gradient(96deg, #440038, #750040, #a80147, #dd074e)
        }

        .box div:nth-child(5){
            background-image: linear-gradient(25deg, #040fe4, #a041ac, #d67371, #fda611)
        }
        .box div:nth-child(6){
            background-image: linear-gradient(25deg, #1e07c0, #785db0, #9fa59c, #b4ee7f)
        }
       

        input{
            display: none;
        }
        
        label:hover{
            background-image: linear-gradient(to left, black, #fff);
            box-shadow: 1px 1px 80px #fff;
        }
        label{
            width: 5em;
            height: 2.5em;
            border: 1px solid #fff;
            display: inline-block;
            color: #fff;
            text-align: center;
            line-height: 2.5em;
            border-radius: 8px;
            margin-left: 13px;
            margin-top: 100px;
            transition: all 0.3s linear;
        }
        input:checked+label{
            background-image: linear-gradient(to left, black, #fff);
            transform: translateY(-15px);
            box-shadow: 1px 1px 80px #fff;
            margin-left: 17%;
        }
        /* 点击旋转六个面位置 */
        #front:checked~.views .box{
            transform: rotateX(-15deg) rotateY(20deg);
        }

        #back:checked~.views .box{
            transform: rotateX(-15deg) rotateY(200deg);
        }

        #left:checked~.views .box{
            transform: rotateX(-10deg) rotateY(110deg);
        }

        #right:checked~.views .box{
            transform: rotateX(-15deg) rotateY(-70deg);
        }

        #top:checked~.views .box{
            transform: rotateY(18deg) rotateX(-90deg);
        }

        #bottom:checked~.views .box{
            transform: rotateY(-18deg) rotateX(90deg);
        }

        /* 放大 */
        #big:checked~.views .box{
            transform: scale(2) rotateY(20deg) rotateX(20deg);
        }
        /* 缩小 */
        #small:checked~.views .box{
            transform: scale(0.3) rotateY(-20deg) rotateX(-20deg);
        }

        /* 旋转 */
        @keyframes rotate{
            0%{
                transform: rotateX(0) rotateY(0);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        #rotate:checked~.views .box{
            /* 添加自定义动画然后调用 */
            animation: rotate 4.5s linear infinite;
           
        }

        #rotate:checked~.views .box .face{
             box-shadow: 1px 1px 150px #fff;
        }
        /* 发光 */
        #btn:checked~.views .box .face{
            animation: btn 0.3s linear infinite;
        }

        @keyframes btn{
            0%{}
            100%{
                box-shadow: 1px 1px 120px #fff;
            }
        }
        /* 变色 */
        #btn1:checked~.views .box .face{
            background-image: linear-gradient(25deg, #0072c5, #7d83b3, #b494a1, #e3a78d)
        }

        /* 展开 */
        #open:checked~.views .box .front{
            transform: translate3d(0,0,380px);
        }
        #open:checked~.views .box .back{
            transform: rotateY(180deg) translate3d(0,0,380px);
        }
        #open:checked~.views .box .left{
            transform: rotateY(-90deg) translate3d(0,0,380PX);
        }
        #open:checked~.views .box .right{
            transform: rotateY(90deg) translate3d(0,0,380px);
        }
        #open:checked~.views .box .top{
            transform: rotateX(90deg) translate3d(0,0,380px);
        }

        #open:checked~.views .box .bottom{
            transform: rotateX(-90deg) translate3d(0,0,380px);
        }

        /* 移动 */
        #btn2:checked~.views{
            /*animation-direction:alternate;    动画先正常运行再反方向运行，并持续交替运行*/
            animation: btn2 1s linear infinite alternate;
        }
        @keyframes btn2{
            0%{
                transform: translateX(-500px);
            }
            100%{
                transform: translateX(500px);
            }
        }
    </style>
</head>
<body>
    <input type="radio" name="box" id="front" checked>
    <label for="front">正面</label>

    <input type="radio" name="box" id="back">
    <label for="back">反面</label>

    <input type="radio" name="box" id="left">
    <label for="left">左边</label>

    <input type="radio" name="box" id="right">
    <label for="right">右边</label>

    <input type="radio" name="box" id="top">
    <label for="top">上面</label>

    <input type="radio" name="box" id="bottom">
    <label for="bottom">下面</label>

    <input type="radio" name="box" id="big">
    <label for="big">放大</label>

    <input type="radio" name="box" id="small">
    <label for="small">缩小</label>

    <input type="radio" name="box" id="rotate">
    <label for="rotate">旋转</label>

    <input type="radio" name="box" id="open">
    <label for="open">展开</label>

    <input type="radio" name="box" id="btn">
    <label for="btn">发光</label>

    <input type="radio" name="box" id="btn1">
    <label for="btn1">变色</label>

    <input type="radio" name="box" id="btn2">
    <label for="btn2">移动</label>
    



    <div class="clear"></div>
    <!-- 3D空间 -->
    <div class="views">
        <!-- 3D元素 -->
        <div class="box">
            <div class="face front">
                正面
            </div>
            <div class="face back">
                反面
            </div>
            <div class="face left">
                左边
            </div>
            <div class="face right">
                右边
            </div>
            <div class="face top">
                上面
            </div>
            <div class="face bottom">
                下面
            </div>
        </div>
    </div>

</body>
</html>